<script setup>
import { ref, onMounted } from 'vue'
import Info from './info.vue'
import { getPage, delBatch,del,getJLlist } from '@/api/rule'

// 表单状态
const filterState = ref(true)
// 表单数据
const isExpand = ref(false)

const formData = ref({
  pageNum: 1,
  pageSize: 10,
  // date:'',
  empName:'',
  workCode:'',
  affiliatedUnit:'',//测试单位

})
const dates = ref([])
const tableData = ref({})
const loadData = async () => {
  const r = await getJLlist(formData.value)
  console.log('你好',r);
  tableData.value = r.data
}
const ClearloadData = async () => {
  formData.value.empName='',
  formData.value.workCode='',
  formData.value.affiliatedUnit=''
  const r = await getJLlist(formData.value)
  tableData.value = r.data
}
//页面渲染之后就执行
onMounted(() => {
  loadData()
})

// 修改
const infoRef = ref()
const onEdit = (row) => {
  infoRef.value.state = true
  if (row) {
    infoRef.value.formData.id = row.id
    infoRef.value.formData.name = row.name
    infoRef.value.formData.type = row.type
    infoRef.value.formData.comment = row.comment
    infoRef.value.formData.status = row.status
    infoRef.value.formData.effTime = row.effTime
    infoRef.value.formData.workUpTime = row.workUpTime
    infoRef.value.formData.workDownTime = row.workDownTime
    infoRef.value.formData.clockStartTime = row.clockStartTime
    infoRef.value.formData.clockPeriod = JSON.parse( row.clockPeriod)
    infoRef.value.formData.flexTime = row.flexTime
  }
}
// // 用户删除
// const onDelete = (ids) => {
//   ElMessageBox.confirm('确定删除数据吗?', '温馨提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })
//     .then(async () => {
//       //请求接口 删除数据
//       let r = await delBatch({ ids })
//       if (r.code == 0) {
//         ElMessage({ type: 'success', message: '删除成功' })
//         loadData()
//       } else {
//         ElMessage({ type: 'info', message: r.data })
//       }
//     })
//     .catch(() => {
//       ElMessage({ type: 'info', message: '用户取消' })
//     })
// }
// 用户删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定删除这条数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      //请求接口删除数据
      let r = await del([row.id ])
      console.log(r);
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '删除成功' })
        loadData()
      } else {
        ElMessage({ type: 'info', message: r.data })
      }
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '用户取消' })
    })
}
// 批量选择
let ids = ref([])
const onSelectionChange = (val) => {
  let selectIds = []
  val.forEach((item) => {
    if (selectIds.indexOf(item.id) == -1) selectIds.push(item.id)
  })
  ids.value = selectIds
}
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef" @flush="loadData" />
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="人员姓名">
          <el-input placeholder="请输入人员姓名" v-model="formData.empName" />
        </el-form-item>
        <el-form-item label="人员编码">
          <el-input placeholder="请输入人员编码" v-model="formData.workCode" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input placeholder="请输入单位名称" v-model="formData.affiliatedUnit" />
        </el-form-item>
        <!-- <el-form-item label="打卡日期">
          <el-date-picker
        v-model="formData.date"
        value-format="YYYY-MM-DD"
        type="date"
        placeholder="选择时间"
        :size="size"
      />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="loadData">
            <span class="iconfont icon-sousuo"></span>搜索
          </el-button>
          <el-button type="default" @click="ClearloadData"> 重置 </el-button>
          <el-button type="primary" link @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="isExpand" />
              <ArrowDown v-else />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <!-- <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="onEdit">
          <span class="iconfont icon-jiahao"></span>添加
        </el-button>
        <el-button type="danger" :disabled="!ids.length" @click="onDelete(ids)">
          <span class="iconfont icon-shanchu"></span>删除
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row> -->
    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :data="tableData.list" :border="true" >
      <el-table-column label="序号" width="90px" align="center">
        <template #default="scope">
          <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="人员姓名" prop="empName" align="center" />
      <el-table-column label="人员编码" prop="workCode" align="center" />
      <el-table-column label="所属单位" prop="affiliatedUnit" align="center" />
      <el-table-column label="上班打卡时间" prop="workUpRecord" align="center" />
      <el-table-column label="下班打卡时间" prop="workDownRecord" align="center" />
      <!--  <el-table-column label="上班时长" prop="workTime" align="center" /> -->
      <el-table-column label="打卡日期" prop="date" align="center" />
      <el-table-column label="正常与否"  width="120" align="center">
        
        <template #default="scope">
          <div>{{ scope.row.normal}}</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pageNum"
      v-model:page-size="formData.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="loadData"
      @current-change="loadData"
    />
    <!-- 分页 -->
    <!-- 内容 -->
  </Box>
</template>
